<!--
- Author:   .
- Date:    2017/3/4.
- File:    index.vue.
-->
<template>
  <div>
    <app-down></app-down>
    <div class="Web_Box">
      <header class="xd ">
        <div class="logo fl pl20" style="margin: 0">
          <div class="pic"><img src="../assets/images/logo.png" alt=""/></div>
        </div>
        <div class="ShoppingCart fr pr20" @click="gotoMemberNoticeList" style="position: relative">
          <span v-show="ifNewMemberNotice" style="position: absolute; top: 5px; right: 8px; background: red; width: 7px; height: 7px; display: block; border-radius: 50%;"></span>
          <i class="iconfont icon-message-copy"></i>
          <p>消息</p>
        </div>
      </header>
      <mt-swipe :auto="4000" class="banner swiper-container">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide" @click="gotoUrl(item.p_url)">
            <img :src="$config.website + $config.adImgSrc + item.image_src" alt=""/></div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="SearchBox p20">
        <div class="SearchBor xd hidden"><i class="iconfont icon-search lh70"></i>
          <input type="text" class="SearchInp pl80 f26" placeholder="搜索您需要的商品" v-model="searchKeyword" v-on:keyup.13="searchGoods">
          <button type="button" class="SearchBut" @click="searchGoods">搜索</button>
        </div>
      </div>
      <div class="FastEntry bg_fff tc">
        <ul class="f-cb">
          <li v-for="item in goodsClassList" @click="gotoGoodsClassify(item.stc_id)">
            <img :src="$config.website + $config.goodsClassifyImgUrl + item.stc_image">
            <p>{{item.stc_name}}</p>
          </li>
          <li @click="gotoHongIntegralMall" v-show="memberInfo.is_brush_man == '1' "><img src="../assets/images/hong.jpg" alt="">
            <p>红积分专区</p>
          </li>
        </ul>
      </div>
      <div class="Flash_sale" v-if="panicBuyingList.length > 0">
        <div class="sale_tit f-cb">
          <i class="iconfont icon-miaosha"></i><span class="panic">抢购活动</span>
          <router-link :to="{name: 'active-list'}">
            <span class="fr more"><span>更多</span><i class="iconfont icon-next"></i></span>
          </router-link>
        </div>
        <div class="sale_box">
          <ul class="f-cb">
            <li v-for="item in panicBuyingList" @click="gotoActiveGoodsList(item.groupbuy_id)">
              <img :src="$config.website + $config.activityImgSrc + item.groupbuy_image1">
            </li>
          </ul>
        </div>
      </div>
      <hot-news :list="noticeList" v-show="noticeList.length > 0 &&　memberInfo.is_brush_man == '1'"></hot-news>
      <!--新品推荐Start-->
      <div class="index_title" v-if="newGoodsList.length >= 3"><span class="line"></span><span class="tex">新品推荐</span></div>
      <div class="index_Selling" v-if="newGoodsList.length >= 3">
        <div class="sell_box">
          <ul class="f-cb">
            <li class="sell_left" @click="gotoGoodsDetail(newGoodsList[0].goods_commonid)">
              <img :src="$config.website + $config.adImgSrc + newGoodsList[0].image_src"></li>
            <li>
              <div class="protuct f-cb" @click="gotoGoodsDetail(newGoodsList[1].goods_commonid)">
                <img :src="$config.website + $config.adImgSrc + newGoodsList[1].image_src"></div>
              <div class="protuct f-cb bnone" @click="gotoGoodsDetail(newGoodsList[2].goods_commonid)">
                <img :src="$config.website + $config.adImgSrc + newGoodsList[2].image_src"></div>
            </li>
          </ul>
        </div>
      </div>
      <!--热销Start-->
      <div class="index_title"><span class="line"></span><span class="tex">热销鲜花</span></div>
      <div class="CommodityClassification"
        v-infinite-scroll="loadMoreHotGoods"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="con">
          <ul id="content">
            <li v-for="item in hotGoods.data" @click="gotoGoodsDetail(item.goods_commonid)" style="width: 7.25rem;">
              <div class="pic">
                <img :src="$config.website + $config.adImgSrc + item.image_src" alt=""/></div>
              <h3 class="slh2">{{item.adv_title}}
              </h3>
              <p class="Price">￥{{item.goods_price | discount(item.groupbuy_rebate)}}<span class="yj">￥{{item.goods_marketprice}}</span>
              </p>
            </li>
          </ul>
        </div>
        <loading-more :allLoaded="hotGoods.allLoaded" :show="hotGoods.data.length > 0"></loading-more>
      </div>
      <!--热销End-->
    </div>
    <!--客服-->
    <div v-show="false" class="Customer_service"><a href=""><i class="iconfont icon-kefu1"></i></a></div>
    <!--下拉显示更多提示-->
    <!--<pull-more-promt :show="pullMoreShow"></pull-more-promt>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import HotNews from '../components/hot-news.vue'
  import PullMorePromt from '../components/pullMoreNotice'
  import {Swipe, SwipeItem, MessageBox} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({goodsClassList: 'goodsClassList', memberInfo: 'memberInfo'}),
      mapRules({once: 'goodsClassList', need: 'memberInfo'})
    ],
    data() {
      return {
        fromScan: this.$route.query.from_scan == 'true', // 扫码进来的
        bannerList: [],
        balconyList: {data: []}, // 阳台种子
        noticeList: [],
        memberNoticeList: {requested: false, allLoaded: false, data: [], page: '1', pageSize: '10'},
        panicBuyingList: [],
        newGoodsList: [],
        homeVideo: null,
        hotGoods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        searchKeyword: '',
        pullMoreShow: false
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem,
      'hotNews': HotNews,
      'pullMorePromt': PullMorePromt
    },
    created() {
      this.getBannerList()
      this.getNoticeList()
      this.getPanicBuyingList(1, 2)
      this.getBalconyList(1, 1)
      this.getNewGoodsList()
      this.getHotGoods(this.hotGoods.page, this.hotGoods.pageSize)
      this.getHomeVideo()
      this.getMemberNoticeList()
//      this.initWelcome()
    },
    mounted() {
      this.trueNameNeed()
//      this.initNotice20180316()
    },
    computed: {
      ifNewMemberNotice: function () {
        let ifNew = false
        for (let i = 0; i < this.memberNoticeList.data.length; i++) {
          if (this.memberNoticeList.data[i].is_read == '0') {
            ifNew = true
            break
          }
        }
        return ifNew
      }
    },
    methods: {
      gotoHongIntegralMall() {
        this.$router.push({name: 'hong-index'})
      },
      // 20180316新规则通知
      initNotice20180316() {
        let ifNoticeReaded = this.$storage.getIfReadedNotice20180316()
        if (!ifNoticeReaded) { // 如果未读
          this.$storage.setIfReadedNotice20180316(true)
          this.$router.push({name: 'notice-20180316'})
        } else {
          this.trueNameNeed() // 读完公告再做真实姓名必须填写提醒
        }
      },
      async trueNameNeed() {
        let data = await this.$request.getMemberInfo()
        if (data && !data.member_truename) {
          let alert1 = await this.$messageBox.alert('<div style="font-size: 14px; line-height: 20px; text-align: left"><h3 style="text-align: center">关于完善真实姓名及银行卡绑定唯一性的公告</h3><p><b>1、完善真实姓名：</b>“我的”设置中真实姓名填写身份证名字，未填写的请先进行完善，真实姓名仅限变更一次，若因名字填写错误需再次更改的请联系客服处理。</p><p style="margin-top: 10px"><b>2、银行卡绑定唯一性：</b>绑定的银行卡姓名需与真实姓名一致才可绑定，一张银行卡仅限绑定一个会员号，不可重复绑定。</p><p style="text-align: center; margin-top: 20px;">公告最终解释权归淘花1平台</p><p style="text-align: center">2018年3月14日</p></div>')
          if (alert1 == 'confirm') {
            this.$router.push({name: 'setting-truename'})
          }
        }
      },
      gotoUrl(url) {
        if (url == '') {
          return
        }
        if (url.indexOf(this.$config.website) != -1) {
          window.location.href = url // eslint-disable-line
        } else {
          this.$router.push({name: 'iframe', query: {url: url}})
        }
      },
      initWelcome() {
        if (this.$storage.getWelcomed()) { // 每次会话只显示一次
          return
        }
        this.$storage.setWelcomed(true)
        Promise.all([this.$request.getMemberName(), this.$request.getInviterInfo()]).then(response => {
          console.log('response', response)
          let userName = response[0] && response[0].member_name ? response[0].member_name : ''
          let inviterName = response[1] ? response[1] : ''
          let message = ''
          if (this.fromScan) { // 扫码进来的
            message = '<p>您的邀请人：' + inviterName + '</p><p style=" color:#000;">祝您购物愉快！</p>'
          } else {
            message = '<h3 style="height:40px; color:#000;">您好！' + userName + '</h3><p style=" color:#000;">欢迎进入商城，祝您购物愉快！</p>'
          }
          MessageBox.alert(message, {
            confirmButtonText: '好的'
          }).then(action => {
            this.pullMoreShow = true
          })
        }).catch(e => {
          console.error('获取用户信息或上级信息失败', e)
        })
      },
      getInviterInfo() {
        this.$request.getInviterInfo().then(data => {
          if (data) {
            this.inviter = data
          }
        }).catch(e => {
          console.error('获取邀请人失败', e)
        })
      },
      gotoMemberNoticeList() {
        this.$router.push({name: 'member-notice-list'})
      },
      getMemberNoticeList() {
        this.memberNoticeList.loading = true
        this.$request.getMemberNoticeList(this.memberNoticeList.page, this.memberNoticeList.pageSize).then(data => {
          if (data.length < this.memberNoticeList.pageSize) {
            this.memberNoticeList.allLoaded = true
          }
          this.memberNoticeList.data = [...this.memberNoticeList.data, ...data]
        }).finally(() => {
          this.memberNoticeList.loading = false
          this.memberNoticeList.requested = true
        })
      },
      gotoNoticeList() {
        this.$router.push({name: 'notice-list'})
      },
      gotoGoodsClassify(classifyId) {
        this.$router.push({name: 'goods-classify', query: {id: classifyId}})
//        window.location.href = 'http://' + window.location.host + '/wap/goods/classify?id=' + classifyId // ios微信分享要如此跳转后才能正确分享
      },
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
//        window.location.href = 'http://' + window.location.host + '/wap/goods/detail/' + goodsCommonid // ios微信分享要如此跳转后才能正确分享
      },
      gotoActiveGoodsList(id) {
        this.$router.push({name: 'active-goods-list', params: {id: id}})
      },
      getBannerList() {
        this.$request.getAdvList().then(data => {
          this.bannerList = data
        })
      },
      // 去除iframe字符串的宽高
      resetIframWH(html) {
        html = html.replace(/height=\d+/g, '')
        html = html.replace(/width=\d+/g, 'width="100%"')
        return html
      },
      getNoticeList() {
        this.$request.getNoticeList().then(data => {
          this.noticeList = data
        })
      },
      getPanicBuyingList(page, pageSize) {
        this.$request.getPanicBuyingList(page, pageSize).then(data => {
          this.panicBuyingList = data
        })
      },
      getNewGoodsList() {
        this.$request.getNewGoodsList().then(data => {
          this.newGoodsList = data
        })
      },
      getHotGoods(page, pageSize) {
        this.hotGoods.loading = true
        this.$request.getHotGoodsList(page, pageSize).then(data => {
          if (data.length < this.hotGoods.pageSize) {
            this.hotGoods.allLoaded = true
          }
          this.hotGoods.data = [...this.hotGoods.data, ...data]
        }).finally(() => {
          this.hotGoods.requested = true
          this.hotGoods.loading = false
        })
      },
      getBalconyList(page, pageSize) {
        this.$request.getBalconyList(page, pageSize).then(data => {
          this.balconyList = data
        })
      },
      getHomeVideo() {
        this.$request.homeVideo().then(data => {
          this.homeVideo = data
        })
      },
      loadMoreHotGoods() {
        if (this.hotGoods.loading || this.hotGoods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getHotGoods(++this.hotGoods.page, this.hotGoods.pageSize)
        }, 500)
      },
      searchGoods() {
        if (this.searchKeyword == '') {
          this.$toast('搜索关键字不能为空')
          return
        }
        this.$router.push({name: 'search-goods', query: {keyword: this.searchKeyword}})
      }
    }
  }
</script>

<style>
</style>
